<template>
  <div class="banner h-[60px]" v-if="form">
    <el-image :src="form.photo"></el-image>
  </div>
  <div v-if="form" class="flex flex-col w-full md:w-3/4 m-auto my-3">
    <el-breadcrumb class="py-2" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if="form.parentName" :to="{ path: '/article/' + form.categoryId}">{{ form.parentName }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/article/' + form.categoryId}">{{ form.categoryName }}</el-breadcrumb-item>
      <el-breadcrumb-item>文章详情</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="bg-white p-4 mt-4 flex flex-col gap-xl">
      <div class="article-title-box p-4">
        <div class="text-3xl">{{ form.title }}</div>
        <div class="text-sm pt-3 text-gray-4 flex gap-xl">
          <span>{{ form.createTime }}</span>
          <span>浏览：{{ form.actualViews }}</span>
        </div>
        <el-divider style="height: 1px " />
      </div>
      <div class="content leading-8 text-xl p-3 text-gray-8" v-html="form.content"></div>
    </div>
  </div>
  <div v-if="!form">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useRequest} from "~/composables/useRequest";
import type {Goods} from "~/api/shop/goods/model";
import type {Article} from "~/api/cms/article/model";

const route = useRoute();
const { query, params } = route;
const { id } = params;
const activeName = ref('parameter');
const rate = ref(4);


// 页面信息
const form = ref<Article | any>();

// 请求数据
const { data: info } = await useRequest<ApiResult<Article>>('/cms/article/' + id)
form.value = info.value?.data;
// form.value.files = JSON.parse(form.value.files);
form.value.num = 1;
form.value.radio = '0'

const handleClick = (tab, event) => {
  console.log(tab, event);
}
</script>

<style scoped lang="scss">
  .content *{
    max-width: 100%;
  }
</style>
